<!--
 * @Author: yuanweijiang
 * @Date: 2025-03-31 15:21:00
 * @LastEditors: yuanweijiang
-->
<template>
	<el-dialog
		class="content"
		width="550"
		v-model="state.visible"
		:close-on-click-modal="false"
		draggable
		:destroy-on-close="true"
		@close="handleClose"
	>
		<template #header>
			<span class="el-dialog__title">创建标签</span>
			<i style="position: absolute; cursor: pointer; right: 16px; top: 16px" class="iconfont icon-guanbi-1"></i>
		</template>
		<div class="relative flex items-center justify-between px-3 h-8">
			<div class="flex gap-3">
				<el-tag :closable="closeFlag" @close="closeTaglist(item)" v-for="item in state.tagList" :key="item" size="large">{{ item }}</el-tag>
			</div>
			<el-input class="mx-4" placeholder="请输入标签名称" v-if="saveFlag == 0 && aloneFlag" clearable v-model="inputValue" />
			<div v-if="saveFlag == 1" class="absolute right-0">
				<el-icon v-if="state.tagList.length !== 3" class="ml-2 border cursor-pointer" @click="addTagHandle"><Plus /></el-icon>
				<el-icon v-if="state.tagList.length > 0" class="ml-2 border cursor-pointer" @click="closeHandle"><Minus /></el-icon>
			</div>
			<el-button v-if="submitFlag" type="primary" class="dialogTrue" @click="submitTag">保存</el-button>
		</div>
	</el-dialog>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';
const state = reactive({
	tagList: [],
});
const saveFlag = ref(1);
const closeFlag = ref(false);
const submitFlag = ref(false);
const aloneFlag = ref(true);
const inputValue = ref('');
const emit = defineEmits(['refresh']);

function handleClose() {
	saveFlag.value = 1;
	submitFlag.value = false;
	closeFlag.value = false;
}
function addTagHandle() {
	saveFlag.value = 0;
	submitFlag.value = true;
	aloneFlag.value = true;
}
const openDialog = (val: any) => {
	const { visible = true, tagList = [], id } = val;
	Object.assign(state, { visible, tagList, id });
};

const closeTaglist = (res) => {
	state.tagList = state.tagList.filter((item) => item !== res);
};
function submitTag() {
	if (inputValue.value) {
		state.tagList.push(inputValue.value);
	}
	saveFlag.value = 1;
	submitFlag.value = false;
	inputValue.value = '';
	closeFlag.value = false;
	state.visible = false;
	emit('refresh', { tagList: state.tagList, id: state.id });
}

function closeHandle() {
	closeFlag.value = true;
	saveFlag.value = 0;
	submitFlag.value = true;
	aloneFlag.value = false;
}
defineExpose({ openDialog });
</script>

<style scoped>
.el-icon {
	width: 30px;
	height: 30px;
}
</style>
